<template>
  <div id="onlyOfficeWord">
    <div :id="'divOnlyOfficeWord_'+divId"></div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, watch } from 'vue';
let { proxy }: any = getCurrentInstance();
import { AppStore } from '@/stores/store';

let store = AppStore();
const vueAppOnlyofficeUrl = (window as any).apiUrl.VITE_DOCKER_SERVER_URL;
let config: any = {};

defineExpose({ inintOfficeConfig });
let docEditor: any;
let divId = new Date().getTime().toString();

// 方法定义区 =============
// 页面加载时更新
onMounted(() => {
  //docEditor = (window as any).DocsAPI.DocEditor('divOnlyOfficeWord_' + divId, getConfig());
});
function inintOfficeConfig(row: any) {
  console.log(row);
  config = row;
  refreshEditor();
}

function getConfig() {
  const econfig = {
    document: {
      //后缀
      fileType: 'docx',
      key: config.id + '_' + new Date().getTime().toString(), // 'mydoc_' + new Date().getTime(),
      title: (config.title && config.title.length > 0 ? config.title : '未命名') + '.docx',
      permissions: {
        chat: false,
        edit: config.isEdit === true || config.isEdit === undefined || config.isEdit === null ? true : false, //是否可以编辑: 只能查看，传false
        print: true,
        download: true
        // "fillForms": true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
        // "review": true //跟踪变化
      },
      url: vueAppOnlyofficeUrl + config.fileUrl
      //url: 'http://server.ysddev.cn:11010/image/2025-06-10/BC6000/test.docx'
    },
    documentType: 'word',
    editorConfig: {
      //编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
      callbackUrl: vueAppOnlyofficeUrl + '/lis/emr/itemStandardTaskFile/saveFile?id='+config.id+'&taskId='+config.taskId+'&orgId='+config.orgId,
      lang: 'zh-CN', //语言设置
      // 定制
      customization: {
        autosave: true, //是否自动保存
        forcesave: true, //是否强制保存
        comments: false,
        help: false,
        hideRightMenu: true, //定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
        //是否显示插件
        plugins: true,
        customer: {
          name: '医顺达（山东）信息技术有限公司'
        },
        logo: {
          //image: vueAppOnlyofficeUrl + '/upload/logo.png',
          url: 'http://www.ysdsoftware.com',
          visible: true
        }
      },
      user: {
        name: store.userInfo.realname,
        id: store.userInfo.id
      }
    },
    width: '100%',
    height: '100%',
    events: {
      onDocumentReady: (e: any) => {
        console.log('文档准备好了');
        proxy.$emit('returnEditor', docEditor);
      },
      onWarning: (e: any) => {
        console.log('onlyoffice warning:', e);
      },
      onError: (e: any) => {
        console.log('onlyoffice error:', e);
      },
      onDocumentStateChange: (e: any) => {
        // console.log('onlyoffice change:', e);
        //编辑完毕后保存业务数据
        if (!e.data) {
          proxy.$emit('savedOnlyOffice', config);
        }
      },
      onSubmit: (e: any) => {
        // console.log(e);
      }
    }
  };
  return econfig;
}

function setIsEdit(isEdit) {
  config.isEdit = isEdit;
}

function refreshEditor() {
  if (docEditor) {
    docEditor.destroyEditor();
  }
  docEditor = (window as any).DocsAPI.DocEditor('divOnlyOfficeWord_' + divId, getConfig());
}

function destroyEditor() {
  docEditor.destroyEditor();
}
</script>
<style lang="scss" scoped>
#onlyOfficeWord {
  height: 100%;
  width: 100%;
}
</style>